<template>
  <apply-layout :current="3">
    <mt-button slot="right" @click="back">上一步</mt-button>
    <div class="list" style="padding: 0 0 .2rem 0;">
      <div class="item">
        <div class="common-title">
          <span class="left">工作经历</span>
          <span @click="toggleShow(0)" v-if="!toggle[0]">+ 添加</span>
          <span @click="toggleShow(0)" v-if="toggle[0] && !codeEdit[0]">- 收起</span>
          <span v-if="toggle[0] && codeEdit[0]" @click="delWork"><i class="xffont xf-shanchu"></i>&nbsp;删除此记录</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="data-list" v-if="!toggle[0]" key="list">
            <loading-text v-if="worksLoading"></loading-text>
            <apply-empty v-if="!worksLoading && !works.length"></apply-empty>
            <div class="data-item" v-for="(val, key) in works" :key="key" @click="toggleShow(0, val)">
              <span>{{val.aae030}}</span>
              <span>{{val.aac045}}</span>
            </div>
          </div>
          <form-work :detail="codeEdit[0]" v-if="toggle[0]" @cancel="toggleShow(0)" @save="saveWork" key="form"></form-work>
        </transition>
      </div>
      <div class="item">
        <div class="common-title">
          <span class="left">专业技术与职业（工种）资格情况</span>
          <span @click="toggleShow(1)" v-if="!toggle[1]">+ 添加</span>
          <span @click="toggleShow(1)" v-if="toggle[1] && !codeEdit[1]">- 收起</span>
          <span v-if="toggle[1] && codeEdit[1]" @click="delSkill"><i class="xffont xf-shanchu"></i>&nbsp;删除此记录</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="data-list" v-if="!toggle[1]" key="list">
            <loading-text v-if="skillsLoading"></loading-text>
            <apply-empty v-if="!skillsLoading && !skills.length"></apply-empty>
            <div class="data-item" v-for="(val, key) in skills" :key="key" @click="toggleShow(1, val)">
              <span>{{val.titleDate}}</span>
              <span>{{val.titleName}}</span>
            </div>
          </div>
          <form-technology key="form" :detail="codeEdit[1]" v-if="toggle[1]" @cancel="toggleShow(1)" @save="saveSkills"></form-technology>
        </transition>
      </div>
      <div class="item">
        <div class="common-title">
          <span class="left">语言能力</span>
          <span @click="toggleShow(2)" v-if="!toggle[2]">+ 添加</span>
          <span @click="toggleShow(2)" v-if="toggle[2] && !codeEdit[2]">- 收起</span>
          <span v-if="toggle[2] && codeEdit[2]" @click="delLang"><i class="xffont xf-shanchu"></i>&nbsp;删除此记录</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="data-list" v-if="!toggle[2]" key="list">
            <loading-text v-if="languageLoading"></loading-text>
            <apply-empty v-if="!languageLoading && !languages.length"></apply-empty>
            <div class="data-item" v-for="(val, key) in languages" :key="key" @click="toggleShow(2, val)">
              <span>{{val.languageName}}</span>
              <span>{{val.languageSkilledName}}</span>
            </div>
          </div>
          <form-language key="form" :detail="codeEdit[2]" v-if="toggle[2]" @cancel="toggleShow(2)" @save="saveLanguage"></form-language>
        </transition>
      </div>
      <div class="item">
        <div class="common-title">
          <span class="left">教育经历</span>
          <span @click="toggleShow(3)" v-if="!toggle[3]">+ 添加</span>
          <span @click="toggleShow(3)" v-if="toggle[3] && !codeEdit[3]">- 收起</span>
          <span v-if="toggle[3] && codeEdit[3]" @click="delEdu"><i class="xffont xf-shanchu"></i>&nbsp;删除此记录</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="data-list" v-if="!toggle[3]" key="list">
            <loading-text v-if="eduLoading"></loading-text>
            <apply-empty v-if="!eduLoading && !edus.length"></apply-empty>
            <div class="data-item" v-for="(val, key) in edus" :key="key" @click="toggleShow(3, val)">
              <span>{{val.aae030}}</span>
              <span>{{val.aac045}}</span>
            </div>
          </div>
          <form-edu :detail="codeEdit[3]" v-if="toggle[3]" @cancel="toggleShow(3)" @save="saveEdu" key="form"></form-edu>
        </transition>
      </div>
      <div class="item">
        <div class="common-title">
          <span class="left">家庭情况</span>
          <span @click="toggleShow(4)" v-if="!toggle[4]">+ 添加</span>
          <span @click="toggleShow(4)" v-if="toggle[4] && !codeEdit[4]">- 收起</span>
          <span v-if="toggle[4] && codeEdit[4]" @click="delFamily"><i class="xffont xf-shanchu"></i>&nbsp;删除此记录</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="data-list" v-if="!toggle[4]" key="list">
            <loading-text v-if="familyLoading"></loading-text>
            <apply-empty v-if="!familyLoading && !family.length"></apply-empty>
            <div class="data-item" v-for="(val, key) in family" :key="key" @click="toggleShow(4, val)">
              <span>{{val.siName}}</span>
              <span>{{val.siRelation}}</span>
            </div>
          </div>
          <form-family key="form" :detail="codeEdit[4]" v-if="toggle[4]" @cancel="toggleShow(4)" @save="saveFamily"></form-family>
        </transition>
      </div>
      <div class="item">
        <div class="common-title">
          <span class="left">获得奖励情况</span>
          <span @click="toggleShow(5)" v-if="!toggle[5]">+ 添加</span>
          <span @click="toggleShow(5)" v-if="toggle[5] && !codeEdit[5]">- 收起</span>
          <span v-if="toggle[5] && codeEdit[5]" @click="delReward"><i class="xffont xf-shanchu"></i>&nbsp;删除此记录</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="data-list" v-if="!toggle[5]" key="list">
            <loading-text v-if="rewardLoading"></loading-text>
            <apply-empty v-if="!rewardLoading && !reward.length"></apply-empty>
            <div class="data-item" v-for="(val, key) in reward" :key="key" @click="toggleShow(5, val)">
              <span>{{val.rewardDate}}</span>
              <span>{{val.rewardName}}</span>
            </div>
          </div>
          <roll-in-award-form key="form" :detail="codeEdit[5]" v-if="toggle[5]" @cancel="toggleShow(5)" @save="saveReward"></roll-in-award-form>
        </transition>
      </div>
      <div class="item">
        <div class="common-title">
          <span class="left">获得惩罚情况</span>
          <span @click="toggleShow(6)" v-if="!toggle[6]">+ 添加</span>
          <span @click="toggleShow(6)" v-if="toggle[6] && !codeEdit[6]">- 收起</span>
          <span v-if="toggle[6] && codeEdit[6]" @click="delPunish"><i class="xffont xf-shanchu"></i>&nbsp;删除此记录</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="data-list" v-if="!toggle[6]" key="list">
            <loading-text v-if="punishLoading"></loading-text>
            <apply-empty v-if="!punishLoading && !punish.length"></apply-empty>
            <div class="data-item" v-for="(val, key) in punish" :key="key" @click="toggleShow(6, val)">
              <span>{{val.punishmentDate}}</span>
              <span>{{val.punishmentName}}</span>
            </div>
          </div>
          <form-punish key="form" :detail="codeEdit[6]" v-if="toggle[6]" @cancel="toggleShow(6)" @save="savePunish"></form-punish>
        </transition>
      </div>
      <div class="item">
        <div class="common-title">
          <span class="left">培训经历</span>
          <span @click="toggleShow(7)" v-if="!toggle[7]">+ 添加</span>
          <span @click="toggleShow(7)" v-if="toggle[7] && !codeEdit[7]">- 收起</span>
          <span v-if="toggle[7] && codeEdit[7]" @click="delTrain"><i class="xffont xf-shanchu"></i>&nbsp;删除此记录</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="data-list" v-if="!toggle[7]" key="list">
            <loading-text v-if="trainLoading"></loading-text>
            <apply-empty v-if="!trainLoading && !train.length"></apply-empty>
            <div class="data-item" v-for="(val, key) in train" :key="key" @click="toggleShow(7, val)">
              <span>{{val.aae030}}</span>
              <span>{{val.acc0b1}}</span>
            </div>
          </div>
          <form-train key="form" :detail="codeEdit[7]" v-if="toggle[7]" @cancel="toggleShow(7)" @save="saveTrain"></form-train>
        </transition>
      </div>
    </div>
    <mt-button size="large" type="primary" @click="onSubmit" slot="footer">下一步</mt-button>
  </apply-layout>
</template>
<script>
  import ApplyLayout from './layout.vue'
  import FormWork from './form-work.vue'
  import FormTechnology from './form-technology.vue'
  import FormLanguage from './form-language.vue'
  import FormEdu from './form-edu.vue'
  import FormFamily from './form-family.vue'
  import FormPunish from './form-punish.vue'
  import FormTrain from './form-train.vue'
  import {mapGetters} from 'vuex'
  import LoadingText from '../../../components/loading-text/loading-text'
  import ApplyEmpty from './apply-empty'
  import RollInAwardForm from '../../party/roll-in/roll-in-award-form'

  export default {
    components: {
      RollInAwardForm,
      ApplyEmpty,
      LoadingText,
      FormTrain,
      FormPunish,
      FormFamily,
      FormEdu,
      FormLanguage,
      FormTechnology,
      FormWork,
      ApplyLayout},
    data() {
      return {
        toggle: [],
        codeEdit: [],
        canLeave: false,
        works: [],
        worksLoading: false,
        skills: [],
        skillsLoading: false,
        languages: [],
        languageLoading: false,
        edus: [],
        eduLoading: false,
        family: [],
        familyLoading: false,
        reward: [],
        rewardLoading: false,
        punish: [],
        punishLoading: false,
        train: [],
        trainLoading: false
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      back() {
        this.canLeave = true
        this.$router.replace({
          name: 'apply2'
        })
      },
      toggleShow(num, code) {
        this.setCode(num, code)
        this.toggle[num] = !this.toggle[num]
        this.toggle = Array.prototype.slice.call(this.toggle)
      },
      setCode(num, code) {
        this.codeEdit[num] = code || ''
        this.codeEdit = Array.prototype.slice.call(this.codeEdit)
      },
      onSubmit() {
        this.canLeave = true
        this.$router.replace({
          name: 'apply4',
          query: this.$route.query
        })
      },
      // 工作经历列表
      getWorkList() {
        this.works = []
        this.$post('/admin/person/sapi/personal/records/perEntry/get/work/expace/list', {
          personId: this.$route.query.id
        }, loading => { this.worksLoading = loading }, false).then(res => {
          this.works = res.data.personWorkExpce
        }).catch(() => {
          this.works = []
        })
      },
      saveWork() {
        this.toggleShow(0)
        this.getWorkList()
      },
      delWork() {
        this.$message.confirm('确定删除？').then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/delete/work/expace', {
            personId: this.$route.query.id,
            aac0b0: this.codeEdit[0].aac0b0
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.toggleShow(0)
            this.getWorkList()
          })
        })
      },
      // 专业技术列表
      getSkills() {
        this.skills = []
        this.$post('/admin/person/sapi/personal/records/perEntry/get/title/qualification/list', {
          personId: this.$route.query.id
        }, loading => { this.skillsLoading = loading }, false).then(res => {
          this.skills = res.data.personTitleQualification
        }).catch(() => {
          this.skills = []
        })
      },
      saveSkills() {
        this.toggleShow(1)
        this.getSkills()
      },
      delSkill() {
        this.$message.confirm('确定删除？').then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/delete/title/qualification', {
            id: this.codeEdit[1].id,
            personId: this.$route.query.id
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.toggleShow(1)
            this.getSkills()
          })
        })
      },
      // 语言能力列表
      getLanguages() {
        this.languages = []
        this.$post('/admin/person/sapi/personal/records/perEntry/get/language/list', {
          personId: this.$route.query.id
        }, loading => { this.languageLoading = loading }, false).then(res => {
          this.languages = res.data.personLanguage
        })
      },
      saveLanguage() {
        this.toggleShow(2)
        this.getLanguages()
      },
      delLang() {
        this.$message.confirm('确定删除？').then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/delete/language', {
            personId: this.$route.query.id,
            id: this.codeEdit[2].id
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.toggleShow(2)
            this.getLanguages()
          })
        })
      },
      // 教育经历
      getEdus() {
        this.$post('/admin/person/sapi/personal/records/perEntry/get/education/list', {
          personId: this.$route.query.id
        }, loading => { this.eduLoading = loading }, false).then(res => {
          this.edus = res.data.personEducation
        }).catch(() => {
          this.edus = []
        })
      },
      saveEdu() {
        this.toggleShow(3)
        this.getEdus()
      },
      delEdu() {
        this.$message.confirm('确定删除？').then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/delete/education', {
            personId: this.$route.query.id,
            aac0d0: this.codeEdit[3].aac0d0
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.toggleShow(3)
            this.getEdus()
          })
        })
      },
      // 家庭情况
      getFamily() {
        this.$post('/admin/person/sapi/personal/records/perEntry/get/situation/list', {
          personId: this.$route.query.id
        }, loading => { this.familyLoading = loading }, false).then(res => {
          this.family = res.data.personSituation
        }).catch(() => {
          this.family = []
        })
      },
      saveFamily() {
        this.toggleShow(4)
        this.getFamily()
      },
      delFamily() {
        this.$message.confirm('确定删除？').then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/delete/situation', {
            personId: this.$route.query.id,
            id: this.codeEdit[4].id
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.toggleShow(4)
            this.getFamily()
          })
        })
      },
      // 奖励
      getReward() {
        this.$post('/admin/person/sapi/personal/records/perEntry/get/reward/punishment/list', {
          personId: this.$route.query.id,
          type: 1
        }, loading => { this.rewardLoading = loading }, false).then(res => {
          this.reward = res.data.personRewardpunishment
        }).catch(() => {
          this.reward = []
        })
      },
      saveReward() {
        this.toggleShow(5)
        this.getReward()
      },
      delReward() {
        this.$message.confirm('确定删除？').then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/delete/reward/punishment', {
            personId: this.$route.query.id,
            id: this.codeEdit[5].id
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.toggleShow(5)
            this.getReward()
          })
        })
      },
      // 惩罚
      getPunish() {
        this.$post('/admin/person/sapi/personal/records/perEntry/get/reward/punishment/list', {
          personId: this.$route.query.id,
          type: 2
        }, loading => { this.punishLoading = loading }, false).then(res => {
          this.punish = res.data.personRewardpunishment
        }).catch(() => {
          this.punish = []
        })
      },
      savePunish() {
        this.toggleShow(6)
        this.getPunish()
      },
      delPunish() {
        this.$message.confirm('确定删除？').then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/delete/reward/punishment', {
            personId: this.$route.query.id,
            id: this.codeEdit[6].id
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.toggleShow(6)
            this.getPunish()
          })
        })
      },
      // 培训经历
      getTrain() {
        this.$post('/admin/person/sapi/personal/records/perEntry/get/train/list', {
          personId: this.$route.query.id
        }, loading => { this.trainLoading = loading }, false).then(res => {
          this.train = res.data.personTrain
        }).catch(() => {
          this.train = []
        })
      },
      saveTrain() {
        this.toggleShow(7)
        this.getTrain()
      },
      delTrain() {
        this.$message.confirm('确定删除？').then(() => {
          this.$post('/admin/person/sapi/personal/records/perEntry/delete/train', {
            personId: this.$route.query.id,
            acc0b0: this.codeEdit[7].acc0b0
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.toast(res.message)
            this.toggleShow(7)
            this.getTrain()
          })
        })
      }
    },
    created() {
      const personId = this.$route.query.id
      if (!personId) {
        this.$router.replace({name: 'apply1'})
        return
      }
      this.getWorkList()
      this.getSkills()
      this.getLanguages()
      this.getEdus()
      this.getFamily()
      this.getReward()
      this.getPunish()
      this.getTrain()
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .item{
    margin: .1rem 0 0 0;
    background: #fff;
  }
  .common-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem .3rem;
    border-bottom: 1px solid #d9d9d9;
    .left{
      display: inline-block;
      padding: 0 0 0 .3rem;
      border-left: 6px solid $primary;
      font-weight: bold;
    }
  }
  .data-item{
    display: flex;
    align-items: center;
    padding: .25rem .2rem;
    @include active;
    position: relative;
    &:not(:last-child):after{
      content: '';
      height: 1px;
      width: 95%;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
      background: #d9d9d9;
    }
    span{
      display: inline-block;
      @include ellipsis;
      &:nth-child(1){
        width: 40%;
      }
      &:nth-child(2){
        width: 60%;
        text-align: right;
      }
    }
  }
</style>
